package myJs.basic344

import myJs.api.Api
import myJs.cps.Style
import myJs.myPkg.plotly._
import myJs.tool.Tool
import slinky.core.FunctionalComponent
import slinky.core.annotations.react
import slinky.core.facade.Hooks._
import slinky.web.html._

import scala.concurrent.ExecutionContext.Implicits.global


/**
 * Created by yz on 3/11/2020
 */
@react object TpmCp {

  case class Props(geneId: String)

  val component = FunctionalComponent[Props] { props =>

    val (show, setShow) = useState(true)

    object FTool {

      def refreshSvg = {
        Api.basic344Tpm.barData(props.geneId).map { response =>
          response match {
            case None => setShow(false)
            case Some(data) =>
              val valueObj = data.value.obj
              val kinds = valueObj.keys.toList
              val vs = valueObj.values.toList.map(_.num)
              val texts = kinds.zip(vs).map { case (kind, v) =>
                s"Type:${kind}<br>TPM:${v}"
              }
              val plotDatas = List(
                Bar(
                  x = kinds,
                  y = vs,
                  hoverinfo = HoverInfo.text,
                  hovertext = texts
                )
              )
              val config = Config(displayModeBar = false)
              val layout = Layout(
                xaxis = Axis(tickangle = -45),
                margin = Margin(b = 80, t = 10, l = 50, r = 0),
                yaxis = Axis(title = "TPM"),
                hovermode = HoverMode.closest
              )
              Plotly.newPlot(s"barSvg", plotDatas, layout = layout, config = config)
          }
        }
      }

    }

    useEffect(() => {
      FTool.refreshSvg
    }, List(props.geneId)
    )

    div(style := Style(display = Tool.b2Display(show)), className := "row",
      div(className := "col-md-12",
        div(className := "panel-heading",
          h3(className := "panel-title",
            a(className := "accordion-toggle", data - "toggle" := "collapse", href := "#tpm", "Expression profile ( ",
              " Macadamia integrifolia HAES 344 )")
    )
    ),
    div(className := "panel panel-primary",
      div(id := "tpm", className := "panel-collapse collapse in",
        div(className := "panel-body",

          div(className := "mySvg", id := "barSvg")

        )
      )

    )
    )
    )

  }

}



